<template>
    <div class="card" :style="{width:setWidth,height:setHeight,backgroundColor:bgcolor}">
        <h2>{{title}}</h2>
        <p>{{info}}</p>
    </div>
</template>
<script>
export default {
    name:'infoCard',
    /* props:[
       'title',
       'info',
       'setWidth',
       'setHeight',
       'bgcolor'
    ] */
    props:{
        title:{
            required:true
        },
        info:{
            required:true
        },
        setWidth:{
            default:'100px'
        },
        setHeight:{
            default:'100px'
        },
        bgcolor:{
            default:'#409EFF'
        }
    }
}
</script>
<style scoped>
 .card{
     box-sizing: border-box;
     min-width: 100px;
     min-height: 100px;
     border-radius: 20px;
 }
 .card h2{
     padding-left: 20px;
     font-weight: bolder;
     color: #ffffff;
     
 }
 .card p{
     font-size: 70%;
     padding-left:20px ;
     color: #ffffff;
 }
</style>